window.addEventListener("load",function(){
    
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
      ]
      /* 
      实现步骤:
      1.先获取 .api-span的div
      2.将apiTypeData数组里面的数据渲染到这个div上
      */

     //获取元素
     let divs=this.document.querySelector(".api-span")
     console.log(divs);
    
    let apiHtml=""
    
    // 进行遍历
    apiTypeData.forEach(function(v,i){
        // v代表数组里面的每一项  现在数组里面的每一项是一个对象
        // v.name 拿到需要渲染的内容
        // v.isnew 看结果是否为true  为true就有bolder类名
        if(v.isnew){
            // 设置自定义属性语法： 在标签上 data-自定义属性名 
        apiHtml+=`<span class="bolder" data-keyword=${v.keyword}>${v.name}</span>`
        }else{
            apiHtml+=`<span data-keyword=${v.keyword}>${v.name}</span>`
        }
    })
    // 给标签里面添加内容
    divs.innerHTML=apiHtml
    
    
    // 点击span标签 切换form里面的span内容
    /* 
    实现步骤：
    1.先获取span标签   (集合)  在获取form 里面span
    2.先遍历span 再进行绑定点击事件
    3.改变form里面的span内容
    */
    
    // 点击span 标签 切换form 里面的input的提示文字
    /* 
    实现步骤：
    1.给span标签添加自定义属性
    2.点击span标签以后拿到自定属性的值
    3.将拿到的自定义属性的值给到input的placeholder
    */
    
    // 1.获取元素
    let spans=this.document.querySelectorAll(".api-pages .api-span span")
    let forms=this.document.querySelector(".api-pages form span")
    let inp=this.document.querySelector(".api-pages form input")
    console.log(spans,forms,inp);
    
    // 2.遍历span  
    spans.forEach(function(v){
        // v  代表元素  也就是每一个span标签
        // 3.分别进行绑定点击事件
        v.addEventListener("click",function(){
        // 4.改变form里面span的内容 (this.innerHTML和v.innerHTML是表示一个内容)
        forms.innerHTML=this.innerHTML
    
        // 5.改变input的提示文字
        inp.placeholder=v.getAttribute("data-keyword")
        // 拿h5自定属性的值 语法：标签名.dataset.自定义属性名
        // 原生拿自定属性值 语法: 标签名.getAttribute("自定义属性名")
        console.log(v.getAttribute("data-keyword"));
        })
    })
    
    
    
    
    // api列表渲染

    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
      
        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
      ]
    //   1.获取ul (.api-list)
    //   2.声明一个变量 用来进行拼接
    //   3.把后端传入的数据进行遍历
    //   4.在遍历里面进行拼接
    //   5.把拼接好的数据给到ul 
    
    
    let uls=this.document.querySelector(".api-list")
    console.log(uls);
    
    
    
    listDataArr.forEach(function(v){
    // v 代表数组里的每一项元素  也就每一个对象
    uls.innerHTML+=`
    <li>
    <p class="${v.isSpecial?"api-on active":"api-on"}">企业专用</p>
    <a href="./API-details.html">
      <img src="./src/img/${v.img}" alt="">
      <p>${v.name}</p>
      <p class="${v.price==="免费"?"green":"red"}">${v.price}</p>
    </a>
    <p class="api-sq">申请数据</p>
    </li>
    `
    })
    })
    



    // 模态框1
// 点击登录出现模态框 
let api_sq=document.querySelectorAll(".api-pages .api-list li .api-sq")
let mask=this.document.querySelector("#mask")
let mask_c=this.document.querySelector("#mask #maskbox")
console.log(api_sq,mask);
// api_sq.forEach(function(v){
//     v.addEventListener("click",function(){
//         console.log(1111111);
//         mask.style.display = 'block'

//     })
// })
let ul =document.querySelector('.api-list')
ul.addEventListener('click',function(e){
if(e.target.className==="api-sq"){
    mask.style.display = 'block'
}
})



mask.addEventListener("click",function(e){
  if(e.target.id==='mask'){
    mask.style.display = 'none'
  }
})



// 点击扫码登录出现二维码/tabt 同时隐藏账号登录/tab 同时将on这个类名给到tabt
let a = document.querySelectorAll(".denglu a")
let tab=document.querySelectorAll(".tabo")
console.log(a,tab);
for (let i = 0; i < a.length; i++) {
    a[i].addEventListener("click", function () {
        for(let v=0;v<a.length;v++){
            a[v].classList.remove("on")
            tab[v].style.opacity="0";
            tab[v].style.zIndex="0"
        }
        a[i].classList.add("on")
        tab[i].style.opacity="1";
        tab[i].style.zIndex="99"
    })
}
    
    
    